<!DOCTYPE html>
<!--<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th colspan="5">购物车</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 
                        <input type="checkbox" v-model:checked="ck" @change="checkAll">全选
                    </td>
                    <td>商品名称</td>
                    <td>商品数量</td>
                    <td>商品单价</td>
                    <td>操作</td>
                </tr>
                <tr v-for="phone in list">
                    <td>
                        <input type="checkbox" v-model="phone.show" @change="checkItem">
                    </td>
                    <td>{{phone.name}}</td>
                    <td>
                        <input type="text" v-model.number="phone.num" >
                    </td>
                    <td>{{phone.price}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td>{{totalNum}}件</td>
                    <td>{{totalPrice}}元</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return{
                    list:[
                        {name:'HUAWEI Mate40',
                        price:7399,
                        num:2,
                        show: false
                        },
                        {name:'HUAWEI p40',
                        price:5388,
                        num:5,
                        show: false
                        },
                        {name:'HUAWEI nova8',
                        price:3599,
                        num:10,
                        show: false
                        },
                    ],
                    //是否全选
                    ck:false
                }
            },
            computed:{
                //计算总数量
                totalNum(){
                    let num = 0;
                    this.list.forEach(item =>{
                        num += item.num;
                    });
                    return num;
                },
                //计算总金额
                totalPrice(){
                    let price=0;
                    this.list.forEach(item =>{
                        price+=item.price*item.num;
                    });
                    return price;
                }
            },
            methods:{
                //删除购物车中的某一项
                del(index){
                    //删除购物车中的某一项
                    this.list.splice(index,1);
                },
                //全选
                checkAll(){
                    this.list.forEach(item=>{
                    item.show=this.ck
                    })
                } ,
                //点击
                checkItem(){
                    this.ck=this.list.every(item=>{
                        return item.show
                    })
                    
                }
            },
        })
    </script>
</body>
</html>